<script setup>
import SearchComponent from "./SearchComponent.vue";
import DialogComponent from "./DialogComponent.vue";
const data = ref({
  user: [
    {
      id: 1,
      name: "张三",
      age: 18,
      sex: "男",
      address: "北京",
      phone: "123456",
      email: "123456",
      create_time: "2023-01-01",
      update_time: "2023-01-01"
    },
    {
      id: 2,
      name: "李四",
      age: 19,
      sex: "女",
      address: "上海",
      phone: "123456",
      email: "123456",
      create_time: "2023-01-01",
      update_time: "2023-01-01"
    },
    {
      id: 3,
      name: "王五",
      age: 20,
      sex: "男",
      address: "广州",
      phone: "123456",
      email: "123456",
      create_time: "2023-01-01",
      update_time: "2023-01-01"
    },
    {
      id: 4,
      name: "赵六",
      age: 21,
      sex: "女",
      address: "深圳",
      phone: "123456",
      email: "123456",
      create_time: "2023-01-01",
      update_time: "2023-01-01"
    },
    {
      id: 5,
      name: "孙七",
      age: 22,
      sex: "男",
      address: "杭州",
      phone: "1234567890",
      email: "123456",
      create_time: "2023-01-01",
      update_time: "2023-01-01"
    },
  ]
})
const items = data.value.user.map((item)=>({value:item.name}))
const formData = ref({
  name:"",
  age:"",
  sex:""
})
const addData = ref({
  id:0,
  name:"",
  age:"",
  sex:"",
  address:"",
  phone:"",
  email:"",
  create_time:"",
  update_time:""
})
const showData = data.value.user
const dialogVisible = ref(false)
const dialogTitle = ref("新增用户")
//     computed(()=>{
//   let result = data.value.user
//   if (formData.value.name){
//     result= result.filter((item)=>{
//       return item.name.includes(formData.value.name)
//     })
//   }
//   if (formData.value.age){
//     result=result.filter((item)=>{
//       return item.age==formData.value.age
//     })
//   }
//   if (formData.value.sex){
//    result= result.filter((item)=>{return item.sex.includes(formData.value.sex)})
//   }
//   return result
// })
function query(){
  console.log("查询"+JSON.stringify(formData.value))
  showData.value = data.value.user
  if (formData.value.name){
    showData.value = showData.filter((item)=>{
      return item.name.includes(formData.value.name)
    })
  }
  if (formData.value.age){
      showData.value=showData.filter((item)=>{
      return item.age==formData.value.age
    })
  }
  if (formData.value.sex){
   showData.value= showData.filter((item)=>{return item.sex.includes(formData.value.sex)})
  }

}
function reset(){
  formData.value.name=""
  formData.value.age=""
  formData.value.sex=""
  showData.value = data.value.user
}
function dialog(id){
  if (id){
    dialogTitle.value = "编辑用户"
    addData.value = data.value.user.find((item)=>{
      return item.id==id
    })
  }
  dialogVisible.value = true
}
function addUser(){
  console.log("新增"+JSON.stringify(addData.value))
  const id = addData.value.id;
  if(id){
    data.value.user.forEach((item)=>{
      if(item.id === id){
        item.name = addData.value.name
        item.age = addData.value.age
        item.sex = addData.value.sex
        item.address = addData.value.address
        item.phone = addData.value.phone
        item.email =addData.value.email
        item.update_time = new Date().toLocaleString()
      }
    })
  }else{
    addData.value.id = data.value.user.length+1
    addData.value.create_time = new Date().toLocaleString()
    addData.value.update_time = new Date().toLocaleString()
    data.value.user.push(addData.value)
  }
  dialogVisible.value = false
}
function close(){
  addData.value.age=""
  addData.value.name=""
  addData.value.address=""
  addData.value.phone=""
  addData.value.email=""
  addData.value.sex=""
  addData.value.create_time=""
  addData.value.update_time=""
  dialogVisible.value = false

}
function remove(row){
  console.log(row)
  data.value.user.splice(row.id-1,1)
}

onMounted(()=>{
  query()
})
</script>

<template>
  <div>
    <search-component :items="items"
                      v-model:search="formData"
                      @query="query"
                      @reset="reset"
                      @add="dialog">
      <template #search1>姓名</template>
      <template #search2>年龄</template>
      <template #search3>性别</template>
    </search-component>
    <el-table :data="showData.value"  style="width: 100%">
      <el-table-column type="selection" align="center" header-align="center"></el-table-column>
      <el-table-column type="index" width="80" prop="id" label="编号" align="center" header-align="center"></el-table-column>
      <el-table-column prop="name" width="100" label="姓名" align="center" header-align="center"></el-table-column>
      <el-table-column prop="age" width="100" label="年龄" align="center" header-align="center"></el-table-column>
      <el-table-column prop="sex" width="100" label="性别" align="center" header-align="center"></el-table-column>
      <el-table-column prop="address" width="100" label="地址" align="center" header-align="center"></el-table-column>
      <el-table-column prop="phone" width="120"  label="电话" align="center" header-align="center"></el-table-column>
      <el-table-column prop="email" width="120" label="邮箱" align="center" header-align="center"></el-table-column>
      <el-table-column prop="create_time" width="150" label="创建时间" align="center" header-align="center"></el-table-column>
      <el-table-column prop="update_time" width="150" label="更新时间" align="center" header-align="center"></el-table-column>
      <el-table-column label="操作" width="200" align="center" header-align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="dialog(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <dialog-component :dialogVisible="dialogVisible"
                      :addData="addData"
                      @addUser="addUser"
                      @close="close">
      <template #title>{{dialogTitle}}</template>
    </dialog-component>

  </div>

</template>

<style scoped>

</style>
